
<template>
  <div   v-if="checkPermi(['index:index:index'])"
  class="dashboard-editor-container">

    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="true"
      label-width="68px"
    >
          <el-form-item label="时间">
            <el-date-picker
              v-model="dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM"
              type="monthrange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        <el-button
          type="cyan"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form>
      <line-chart :chart-data="lineChartData" />
    </el-row>
        <el-row :gutter="32">
      <!-- <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col> -->
      <el-col :xs="24" :sm="24" :lg="8">
        <div>
      商家总销售额TOP5</div>
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div>
      商家总销售量TOP5</div>
        <div class="chart-wrapper">
          <dayOrderBar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div>
      商家总收藏量TOP5</div>
        <div class="chart-wrapper">
          <collectionBar-chart />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import store from '@/store'
import { getToken, getExpiresIn, setExpiresIn } from '@/utils/auth'
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
// import {getUserCountByDate,dateFormat} from  '@/api/member/user'
// import {getAllOrderAllPriceByDate,getAllOrderCountByDate} from '@/api/order/order'
// import { dayAddShopNumList } from  "@/api/shop/shop";
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
// import dayOrderBarChart from './dashboard/dayOrderBarChart'
// import collectionBarChart from './dashboard/collectionBarChart'



const lineChartData = {
  memberNum: {
    levelOneData: [],
    levelTwoData: [],
    levelThrData: [],
    dateList:[],
    titleList:["普通会员","黄金会员","至尊会员"]
  },
  shopNum: {
    shopNumList: [],
    dateList:[],
    titleList:["商家数量"]
  },
  orderNuma: {
    allPriceList: [],
    dateList:[],
    titleList:["累计消费"]
  },
  orderNumb: {
    allOrderCount:[],
    dateList:[],
    titleList:["累计订单"]
  }
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    dayOrderBarChart,
    collectionBarChart,
    
    
  },
  data() {
    return {
      //刷新token锁
      refreshLock: false,
      //刷新token的时间
      refreshTime: '',
      lineChartData: lineChartData.memberNum,
      // 日期范围
      dateRange: [],
      queryParams:{},
    }
  },
  created() {
    this.refreshToken();
    this.checkPermi();
    this.getShopNumList();
    this.getMemberNumList();
    this.getAllOrderAllPriceByDate();
    this.getAllOrderCountByDate();
  },
  methods: {

    /** 搜索按钮操作 */
    handleQuery() {
    this.refreshToken()
    this.checkPermi();
    this.getShopNumList();
    this.getMemberNumListMonth();
    this.getAllOrderAllPriceByDateMonth();
    this.getAllOrderCountByDateMonth();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange=[];
      this.handleQuery();
    },

    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
      // getUserCountByDate(){
      //   getUserCountByDate();
      // },
    // 实时检测刷新token
    refreshToken() {
      this.refreshTime = setInterval(() => {
        if (null === getToken()) {
          return;
        }
        const expires_in = getExpiresIn();
        if (expires_in <= 1200 && !this.refreshLock) {
          this.refreshLock = true
          this.$store
            .dispatch('RefreshToken')
            .catch(() => {
              clearInterval(this.refreshTime)
            });
          this.refreshLock = false
        }
        this.$store.commit("SET_EXPIRES_IN", expires_in - 10);
        setExpiresIn(expires_in - 10);
      }, 10000);
    },
    getShopNumList(){
        console.log(typeof this.dateRange[0])
      dayAddShopNumList(this.addDateRange(this.queryParams,this.dateRange)).then(response => {

        lineChartData.shopNum.shopNumList=[]
        lineChartData.shopNum.dateList=[]
        for(var i =0;i<response.data.length;i++){
            lineChartData.shopNum.shopNumList.push(response.data[i].count)
            lineChartData.shopNum.dateList.push(response.data[i].day)
        }
        // console.log(lineChartData.shopNum)
      })
    },
     checkPermi(value) {
      if (value && value instanceof Array && value.length > 0) {
        const permissions = store.getters && store.getters.permissions
        const permissionDatas = value

        const hasPermission = permissions.some(permission => {
          return permissionDatas.includes(permission)
        })

        if (!hasPermission) {
          return false
        }
        return true
      } else {
        console.error(`need roles! Like checkPermi="['system:user:add','system:user:edit']"`)
        return false
      }
    },
    // getMemberNumList(){
    //       var dates = dateFormat("yyyyMMdd",new Date())+"235959";
    //       var myDate = new Date(); //获取今天日期
    //       myDate.setDate(myDate.getDate() - 6);
    //       var seven = dateFormat("yyyyMMdd",myDate)+"235959";
    //       getUserCountByDate(seven,dates).then(response => {
    //           // console.log(response.data)
    //           lineChartData.memberNum.levelOneData = response.data[0];
    //           lineChartData.memberNum.levelTwoData = response.data[1];
    //           lineChartData.memberNum.levelThrData = response.data[2];
    //           lineChartData.memberNum.dateList = response.data[3];
    //       });
    //   },
      // getMemberNumListMonth(){
      //   if(!this.dateRange[0]){
      //      var dates = dateFormat("yyyyMMdd",new Date())+"235959";
      //     var myDate = new Date(); //获取今天日期
      //     myDate.setDate(myDate.getDate() - 6);
      //     var seven = dateFormat("yyyyMMdd",myDate)+"235959";
      //     getUserCountByDate(seven,dates).then(response => {
      //         // console.log(response.data)
      //         lineChartData.memberNum.levelOneData = response.data[0];
      //         lineChartData.memberNum.levelTwoData = response.data[1];
      //         lineChartData.memberNum.levelThrData = response.data[2];
      //         lineChartData.memberNum.dateList = response.data[3];
      //     });
      //   }else{
      //     getUserCountByDate(this.dateRange[0],this.dateRange[1]).then(response => {
      //         // console.log(response.data)
      //         lineChartData.memberNum.levelOneData = response.data[0];
      //         lineChartData.memberNum.levelTwoData = response.data[1];
      //         lineChartData.memberNum.levelThrData = response.data[2];
      //         lineChartData.memberNum.dateList = response.data[3];
      //     });
      //   }
          
      // },
      // getAllOrderAllPriceByDate(){
      //     var dates = dateFormat("yyyyMMdd",new Date())+"235959";
      //     var myDate = new Date(); //获取今天日期
      //     myDate.setDate(myDate.getDate() - 6);
      //     var seven = dateFormat("yyyyMMdd",myDate)+"235959";
      //     getAllOrderAllPriceByDate(seven,dates).then(response => {
      //         // console.log(response.data)
      //         lineChartData.orderNuma.allPriceList = response.data[0];
      //         lineChartData.orderNuma.dateList = response.data[1];
      //     });
      // },
      // getAllOrderAllPriceByDateMonth(){
      //   if(!this.dateRange[0]){
      //      var dates = dateFormat("yyyyMMdd",new Date())+"235959";
      //     var myDate = new Date(); //获取今天日期
      //     myDate.setDate(myDate.getDate() - 6);
      //     var seven = dateFormat("yyyyMMdd",myDate)+"235959";
      //     getAllOrderAllPriceByDate(seven,dates).then(response => {
      //         // console.log(response.data)
      //         lineChartData.orderNuma.allPriceList = response.data[0];
      //         lineChartData.orderNuma.dateList = response.data[1];
      //     });
      //   }else{
      //     getAllOrderAllPriceByDate(this.dateRange[0],this.dateRange[1]).then(response => {
      //         // console.log(response.data)
      //         lineChartData.orderNuma.allPriceList = response.data[0];
      //         lineChartData.orderNuma.dateList = response.data[1];
      //     });
      //   }
          
      // },
      // getAllOrderCountByDate(){
      //     var dates = dateFormat("yyyyMMdd",new Date())+"235959";
      //     var myDate = new Date(); //获取今天日期
      //     myDate.setDate(myDate.getDate() - 6);
      //     var seven = dateFormat("yyyyMMdd",myDate)+"235959";
      //     getAllOrderCountByDate(seven,dates).then(response => {
      //         // console.log(response.data)
      //         lineChartData.orderNumb.allOrderCount = response.data[0];
      //         lineChartData.orderNumb.dateList = response.data[1];
      //     });
      // },
      // getAllOrderCountByDateMonth(){
      //   if(!this.dateRange[0]){
      //     var dates = dateFormat("yyyyMMdd",new Date())+"235959";
      //     var myDate = new Date(); //获取今天日期
      //     myDate.setDate(myDate.getDate() - 6);
      //     var seven = dateFormat("yyyyMMdd",myDate)+"235959";
      //     getAllOrderCountByDate(seven,dates).then(response => {
      //         // console.log(response.data)
      //         lineChartData.orderNumb.allOrderCount = response.data[0];
      //         lineChartData.orderNumb.dateList = response.data[1];
      //     });
      //   }else{
      //     getAllOrderCountByDate(this.dateRange[0],this.dateRange[1]).then(response => {
      //         // console.log(response.data)
      //         lineChartData.orderNumb.allOrderCount = response.data[0];
      //         lineChartData.orderNumb.dateList = response.data[1];
      //     });
      //   }
          
      // }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
  .card-panel-description {
      float: left;
      font-weight: bold;
      margin: 26px;
      margin-right: 20px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
